in this video we're going to make an
awesome sprite the song shader using
shadow bruh
we're going to have our character use
the shader and through a simple script
we're going to make it to solve and
reappear let's begin
[Music]
hello and welcome I'm your code monkey
and this channel is all about helping
you learn how to make your own games
with nf2 torrents made by a professional
indie game developer so if you find the
video helpful consider subscribing okay
so this is what we're trying to make
over here I have my player character
looking normal and I can press a key and
there it is the player sprite dissolves
with a very nice good looking effect and
press another key and there you go he
starts and reappears as you can see the
song effect looks very nice and even as
a great-looking outline glow the glow
color is nicely customizable as is the
speed of the dissolve as an example over
here I have two objects these are meant
to represent teleporters so I can go all
the way over to the input teleporter and
there you go he starts to solving
teleports and reappears and there it is
a very nice use case for this effect so
I go there and search disappearing and
reappears and it looks very nice so here
you can see a great effect all done
through graft and control using a
very simple script alright so this
circle let's get to it okay so here I am
in my starting empty scene let's go into
the project files and in here
right-click we're going to create a new
shader go into the 2d renderer and make
a sprite lit graph let's call this the
this song
Taylor alright let's open it up so here
we are in our shader graph and we have
our nice sprite master node so the first
thing we need is our texture so we go up
here create a new property for a texture
2d let's call this the main text since
this is our main texture and in here
let's make sure we set the reference to
underscore main text this is the default
name for the primary texture okay now
here on let's choose the default so I
chose my spreadsheet and here on the
preview and let's swap it into a quad
okay so far so good now let's drag the
texture onto our board and now in here
as you can see we cannot drag it
directly into the Congo right so we
first need to add a simple texture node
then we drag our texture onto it here's
our texture and we have the RGB and we
can pass into the color and there you go
there's our nice preview so just like
this we have our texture being rendered
some what's tested so here in my scene I
have my
play your script then in here I have the
body which contains the material the
material is this one in here so you
appear to some like the shader going to
shader grafts and let's select the
dissolve shader and there it is with our
texture okay let's test and if there's a
character just standing around okay so
far so good back in the shooter graph
the way we're going to do our this sound
effect is with using some noise so let's
go here to make a simple noise pattern
so we use simple noise there it is
now here we can play around with these
valleys to get something that looks good
relative to our texture so in here and
let's just put 100 now we want to apply
this noise onto the texture alpha so
here on the sample we can grab our
texture alpha and let's multiply it with
our noise output and just like that you
can see what the texture looks like so
without it our alpha is completely full
and with the noise applied there it is
just like that so then we can take our
calculated alpha and let's make a
combined node and with this combined
Nodin let's combine this calculated
alpha with our original color so drag
the our DG and the P and there it is
there's our texture and now we can pass
in the RGB a onto there and just like
that you can already see the preview is
no longer around for alpha some parts
are more transparent and somewhere less
so let's see it in game and there it is
as you can see some parts are more
transparent and some are less so right
here we kind of have just one frame of
our dissolve animation now we want to
start with it completely visible and end
with it completely invisible so back in
the shadow graph in here before we apply
our noise directly we can use something
called a step node here we have an edge
and an input value and we have our
output so let's put the noise into our
input and over here we have a value that
we can change from 0 to 1 now what this
does is it steps through all the values
in our noise and shows the values that
are under this threshold so if I put 0
you can see that the whole thing is
black so everything is at 0 and if I put
point 1 then you can see only the values
under point 1 show up in here so if I
put 25 you can see it starts to appear
more and if I put 1 we have pure white
so using this value here essentially we
can animate our way through the noise
now we need this to take this output and
multiply it in there and there you go
just
like that you can already see it working
so in here if we start off at zero then
the sprite is commonly invisible and if
we put that one it's completely visible
so there you go just like that
and here's how it looks in game as you
can see some parts are fully white and
some are only transparent okay now
instead of having a fixed value in here
we can make this into a properly so it's
making you vector one let's call this
the the song amount let's set the
reference name to the same thing this
whole amount okay by default let's put
it at 0.5 and here on the mode and let's
put it a slider slide from zero to one
just like that okay so now let's drag
the song mount in here and we connect
this directly into there okay so now
let's see how this property looks in
game and yep there's a sprite somewhat
visible somewhat invisible and here in
the inspector you can see our shader
with this song of amount using our nice
slider so in here as I increase it there
you go the sprite is fully visible and
as I decrease it it starts to dissolve
and couple it vanishes all right awesome
this is exactly the effect that we want
so now that we have this nice value
let's make a script to change it through
code so let's make a simple C sharp
script let's call this Li the song
effect and drag it on to the player okay
now in here this is going to be an
extremely simple script so first of all
the first thing we need is our material
so let's add a serialize field for our
material so just like that we have our
films on let's drag our spreadsheet
material and if there's our field for
the material so let's just drag the
spreadsheet material okay so far so good
now in our script let's also define a
float for the song amount and a simple
boolean call is dissolving okay now
let's make a party boy update and honor
update on let's first test it is the
something is true if so then let's
simply increase it the sound amount by
time.deltatime
then let's make sure we clamp it between
0 & 1
okay so we have our dissolve amount
constantly increasing if this is set to
true and now we need to do is apply this
into our shader so the way we do that is
we go into our material and we call the
function set float and in here as you
can see it takes a name and a value so
the name is a reference that we set in
our shader so here you can see that we
set the reference to be underscore the
song of amount so this is the name that
we use so we set the float on the the
sound amount to be this the song amount
alright so that should do it now for
testing let's just simply go down here
and do a simple input so when we press T
we similarly set is the solving to true
so then this increases the dissolve
amount by the time dot all the time and
since the float on the shader alright so
there it is very simple let's test ok so
here we are and the character is
actually invisible because we said our
this song amount to be inverse so won't
fix that later but in here with it
invisible now if I press T and there you
go it started to appear and it's fully
visible alright awesome this is our
effect now it's just as the opposite so
if it is something we increase it and if
not we decrease it so just like that
very simple now here just add another
input okay there it is let's test okay
it's invisible press T and there you go
it starts to show up press Y and there
you go advantages so it shows up and it
goes what all right there it is there's
not a nice effect now let's just swap
out the the self amount to work as it
should be
so here we called it the self amount so
it makes sense for it to be fully
dissolved when the value is at one
rather than when it's at zero so we can
fix this very easily we just had a 1
minus node and we simply take our the
self amount and we do a 1 minus then we
use this output in our step so now with
the solve amount of 0 these price is
fully visible and with a 1 it's fully
invisible alright let's test it in game
okay there it is fully visible now I
press team and there you go it starts to
vanish now press Y and it comes back so
it goes away and regenerates right
there's our very nice effect awesome all
right so another we have this working
let's polish our effect a little bit
we're going to
very nice corn outline when the sprite
is the solving so here's our working
shader graph we do a step and then we
multiply the Alpha by the step amount
and we apply it into the final color
alpha now in order to have an outline
what we really need is to have a color
that is essentially one step further
than the normal alpha so let's go here
into our dissolve amount
except we never use it we use it after
the one - okay so in here let's add a
add node this one takes a value and adds
another one so we take this output in
here and we're going to add it by a tiny
amount so let's put 21 what value we put
here is essentially the thickness of our
outline so then with this value we can
do another step and we use the exact
same input and use this one as the in
value and just like that you can kind of
see the effect working so you can see
that this one in here has a bit more
areas visible than this one so if I put
this on mount a bit more there we go you
can see this one has this amount in this
one has this amount so with this one
being bigger than this one we can do a
simple subtract so we're going to
subtract this one by this one so in here
essentially we have the edges the
difference between this one and this one
so then we can simply use a nice
multiply node and we're going to grab
the Alpha from there multiply it with
this one and just like that you can
already see kind of the effect and over
here you can already see that this one
has a bit more than that one so we can
now multiply this by a nice cone so
let's make a properly a new car come
with me the salt color let's make this
HDR so it looks very nice with a nice
glow and by default let's put it on some
blue okay so we can now take this color
and essentially we just have another a
multiply node and we multiply this color
by this one and there you go you can now
see the outline with our cone and
finally when we need this to add this
one on top of this one so let's push
this to the side and in here we're going
to make an add node and we add this one
onto this one and there it is you can
already see the preview and let's put
the output in there and just like that
on preview you can already see our
effect
okay so let's test it okay here's my
nice character now I press
and there you go it vanishes and looks
really nice with that nice outer glow so
we have a nice dissolve color and it's
nicely glowing so there it is a very
very nice effect all right awesome
all right now one more thing let's
improve our script so in here and let's
get rid of this keyboard input and
inside let's make some nice functions so
we make a public void start this home
and in here we're going to receive a
point for the the song spin and on we're
going to do is set is it something to
true we're going to store the dissolve
speed and up here we simply multiply the
song speed by hour down to time okay now
another one to stop this whole thing
then you simply set it to false okay so
here we have a very nice very simple
script you know here on the map I have
these two sprites these represents some
teleporters so the player goes here and
gets so important on there it just has a
very simple Tom Porter script and in
here we simply test for ontriggerenter
and if it's a player we simply teleport
them to the target position let's see
okay here I am with the player let's go
in here and after a while boom there you
go nice thumb part okay great so now in
here in order to make the teleport look
better when the player enters and let's
start our dissolve so we can go into the
collider to get the component of type
dissolve effects and we simply call
start this only and then after we
teleport we stop the Sony alright that's
it very simple let's test okay here we
are there's the nice character now let's
go in here in there Yotam poor starts
and he shows up and it appears so let's
go just like that go and boom there you
go all right very nice we can also play
around in the corner if we like
okay so here we are I've just published
a bit more so in here I have the start
dissolve and they stopped self corners
the way it's a point is very simple on
these functions we also receive the
color and we simply go into the material
we call set color to set our the self
corner to this corner
alright so very simple let's see what
this looks like okay here's my player
character know what's going enter into
the teleport and there you go starts to
solving and teleports and reappears and
there you go the effect was very nice so
go in there starts to solving with a
nice blue and appears with a nice green
so just like this we have a very nice
effect and looks very cool there it is
and he shows up and yep just like that
awesome and again here is the final
shader and as you can see it's actually
very simple all that we really need to
learn is how these step works so we use
noise we go through the step so we
multiply it by the Alpha which n
modifies our output and by making a
second step that is a bit ahead of the
other one then we can multiply it by a
color and we have a very nice outline
and here it is again we have a very nice
very good looking effect just like that
awesome as always you can download the
project files in utilities from unity
code monkey comm subscribe the channel
for more unity tutorials post any
questions you have in the comments and
I'll see you next time
[Music]